<div class="modal">
    <div class="modal-header">
        <p class="modal-title" style="display: inline-block;">{{ 'upload_status' | translate }}</p>
        <span class="pull-right" ng-if="!isUploading()"><i class="fa fa-close" ng-click="cancel()"></i></span>
        <span class="pull-right" style="margin-right: 10px;"><i class="fa" ng-class="{'fa-minus showStatus':isBarOpen()==true||hasErrMsg(),'fa-plus hideStatus':isBarOpen()==false&&!hasErrMsg()}" ng-click="toggleQueue()"></i></span>
    </div>
    <div class="modal-body" style="clear:both;" id="progress-bar" ng-class="{'showStatus':isBarOpen()==true||hasErrMsg(),'hideStatus':isBarOpen()==false&&!hasErrMsg()}" >
        <div class="row" ng-repeat="file in files() | orderBy:'statusCode':true">
            <p class="col-sm-12"><b>{{ 'file_name' | translate }}</b> {{ file.file.iosName || file.file.name }}</p>
            <div class="col-sm-6">
                <uib-progressbar  value="file.percent"><b>{{file.percent}}%</b></uib-progressbar>
            </div>
            <!--<p class="col-sm-4 text-center"><span ng-if="!file.isUploaded||file.isError">{{ file.loaded | bytes }}/</span><span>{{ file.file.size | bytes }}</span></p>-->
            <p class="col-sm-4 text-center">
                <span ng-if="!file.isUploaded||file.isError">{{ file.loaded | bytes }}/</span>
                <span>{{ file.total | bytes }}</span>
            </p>
            <p class="col-sm-2 text-center" ng-class="{'text-danger':file.isError==true,'text-success':file.isUploaded==true&&file.isError==false}">{{ file.status }}</p>
            <p class="text-danger col-sm-12" ng-if="file.isError">{{ file.errorMsg }}</p>
        </div>
    </div>
</div>